<template>
	<view>
		<view class="container">
			<view class="common-header-xian"></view>
			<!-- 表单 -->
			<form @submit="saveData" report-submit="true">
				<view class="address-cont-title b-f b-b">
					<view class="list address-box dis-flex b-b">
						<view class="left-name">
							<text class="f-30">收货人</text>
						</view>
						<view class="right-cont flex-box">
							<input name="name" placeholder="请输入收货人姓名" :value="detail.name"></input>
						</view>
					</view>
					<view class="list address-box dis-flex">
						<view class="left-name">
							<text class="f-30">手机号</text>
						</view>
						<view class="right-cont flex-box">
							<input name="phone" placeholder="请输入收货人联系电话" type="number" :value="detail.phone"></input>
						</view>
					</view>
				</view>
				<view class="address-cont-title b-f b-b">
					<view class="dis-flex list address-box m-top20 b-b">
						<view class="left-name">
							<text class="f-30">州名</text>
						</view>
						<view class="address-cont-box flex-box">
							<picker mode="selector" @change="bindPickerChangezhou" :data-id="zhou[zhouindex].id" :value="zhou[zhouindex].id" :range="zhoudata"
							 class="addrespicker" :range-key="name">
								<text v-if="zhouindex" class="f-30">{{zhou[zhouindex].name}}</text>
								<text v-else class="f-30 col-7">选择州名</text>
							</picker>
						</view>
					</view>

					<view class="dis-flex list address-box  b-b">
						<view class="left-name">
							<text class="f-30">市县名</text>
						</view>
						<view class="address-cont-box flex-box">
							<picker mode="selector" @change="bindPickerChangeshixian" :data-id="shixian[shixianindex].id" :value="shixian[shixianindex].id"
							 :range="shixian" class="addrespicker" range-key="name">
								<text v-if="shixianindex" class="f-30">{{shixian[shixianindex].name}}</text>
								<text v-else class="f-30 col-7">选择市县名</text>
							</picker>
						</view>
					</view>

					<view class="dis-flex list address-box">
						<view class="left-name">
							<text class="f-30">详细地址</text>
						</view>
						<view class="right-cont flex-box">
							<input name="detail" placeholder="请输入街道小区楼层" type="text" :value="detail.detail"></input>
						</view>
					</view>
				</view>
				<view class="padding-box m-top20 profile-btn">
					<button form-type="submit" :disabled="disabled">保存</button>
				</view>
			</form>
		</view>

		<!-- 快捷导航 -->
		<shortcut></shortcut>

	</view>
</template>

<script>
	import shortcut from '../../components/goods/shortcut.vue'
	export default {
		components: {
			// （组件命名）
			shortcut,
		},
		data() {
			return {
				zhou: [], //州级 内容
				zhoudata: [], //州级 内容
				shixian: [], //市县级 内容
				disabled: false,
				nav_select: false, // 快捷导航
				region: '',
				detail: {},

				zhouindex: '',
				shixianindex: '',
				zhouid: '', //选中 州级 ID
				shixianid: '', //选中 市县级 ID
				shixiandata:[],
				error: '',
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 获取当前地址信息
			this.getAddressDetail(options.address_id);
			this.zhoulevel();
		},
		methods: {

			/**
			 * 获取当前地址信息
			 */
			getAddressDetail: function(address_id) {
				let _this = this;
				_this._get('address/detail', {
					address_id
				}, function(result) {
					// console.log(result.data)
					_this.setData(result.data);
				});
			},

			/**
			 * 表单提交
			 */
			saveData: function(e) {
				let _this = this,
					values = e.detail.value

				values.zhouid = this.zhouid;
				values.shixianid = this.shixianid;
				// 记录formId
				_this.saveFormId(e.detail.formId);

				// 表单验证
				if (!_this.validation(values)) {
					_this.showError(_this.error);
					return false;
				}

				// 按钮禁用
				_this.setData({
					disabled: true
				});

				// 提交到后端
				values.address_id = _this.detail.address_id;
				_this._post_form('address/haiwaiedit', values, function(result) {
					_this.showSuccess(result.msg, function() {
						uni.navigateBack();
					});
				}, false, function() {
					// 解除禁用
					_this.setData({
						disabled: false
					});
				});
			},

			/**
			 * 表单验证
			 */
			validation: function(values) {
				if (values.name === '') {
					this.error = '收件人不能为空';
					return false;
				}
				if (values.phone.length < 1) {
					this.error = '手机号不能为空';
					return false;
				}
				// if (values.phone.length !== 11) {
				//   this.data.error = '手机号长度有误';
				//   return false;
				// }
				// let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
				// if (!reg.test(values.phone)) {
				//   this.data.error = '手机号不符合要求';
				//   return false;
				// }
				if (!this.zhouid) {
					this.error = '州名不能空';
					return false;
				}
				if (!this.shixianid) {
					this.error = '市县名不能空';
					return false;
				}
				if (values.detail === '') {
					this.error = '详细地址不能为空';
					return false;
				}
				return true;
			},

			/**
			 * 修改地区
			 */
			bindRegionChange: function(e) {
				this.setData({
					region: e.detail.value
				})
			},
			// 获取海外 州 列表 (编辑版)
			zhoulevel: function() {
				let _this = this;
				let _zhoudata = []
				_this._get('address/zhoulevel', {

				}, function(result) {

					var zhou = result.data.zhou;
					var detail = _this.detail;

					//遍历获取相同ID 获取州
					for (var i = 0; i < zhou.length; i++) {
						if (zhou[i].id == detail.zhouid) {
							var inx = i;
							var zhouid = detail.zhouid;
						}
						_zhoudata.push(zhou[i].name)
						
						
					}
					console.log(_zhoudata)
					_this.shixianlevel(zhouid);
					_this.setData({
						zhou: zhou,
						zhouindex: "" + inx + "",
						zhouid: zhouid,
						zhoudata:_zhoudata
					});

				});
			},
			// 获取海外 市县列表 (编辑版)
			shixianlevel: function(address_id) {
				let _this = this;
				let _shixiandata = []
				_this._get('address/shixianlevel', {
					address_id
				}, function(result) {

					var detail = _this.detail;
					var shixian = result.data.shixian;
					//遍历获取相同ID 获取市县
					for (var i = 0; i < shixian.length; i++) {
						if (shixian[i].id == detail.shixianid) {
							var inxsx = i;
							var shixianid = detail.shixianid;
						}
						_shixiandata.push(shixian[i].name)
					}
					console.log(_shixiandata)
					_this.setData({
						shixian: shixian,
						shixianindex: "" + inxsx + "",
						shixianid: shixianid,
						shixiandata:['ddddd','ddddgggggggggggg'],
					});
				});
			},


			bindPickerChangezhou: function(e) {

				this.setData({ //给变量赋值
					zhouid: this.zhou[e.detail.value].id, //根据索引去查对应的id
					zhouindex: e.detail.value, //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
				})
				this.shixianlevel(this.zhouid);
			},

			bindPickerChangeshixian: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.setData({ //给变量赋值
					shixianid: this.shixian[e.detail.value].id, //根据索引去查对应的id
					shixianindex: e.detail.value, //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
				})
			},
			/**
			 * 获取微信地址
			 */
			chooseAddress: function() {
				let _this = this;
				uni.chooseAddress({
					success: function(res) {
						_this.setData({
							'detail.name': res.userName,
							'detail.phone': res.telNumber,
							'detail.detail': res.detailInfo,
							region: [res.provinceName, res.cityName, res.countyName],
						});
					}
				})
			}

		},
	}
</script>

<style>
	.profile-list .admin {
		padding-left: 15px;
		font-size: 30rpx;
		color: #333;
	}

	.address-box .left-name {
		width: 85px;
	}

	.address-cont-title .list {
		width: auto;
		padding: 24rpx;
	}

	.tui-picker-detail text {
		padding: 0 10rpx;
	}

	.infoText {
		line-height: 56rpx;
		display: block;
	}

	picker-view {
		background-color: white;
		padding: 0;
		width: 100%;
		height: 480rpx;
		bottom: 0;
		position: fixed;
	}

	picker-view-column view {
		vertical-align: middle;
		font-size: 28rpx;
		line-height: 28rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.animation-element-wrapper {
		display: flex;
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: 21;
	}

	.animation-element {
		display: flex;
		position: fixed;
		width: 100%;
		height: 570rpx;
		bottom: 0;
		background-color: rgba(255, 255, 255, 1);
	}

	.animation-button {
		margin-top: 20rpx;
		top: 20rpx;
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		align-items: center;
	}

	.address-text {
		color: #999;
		display: inline-flex;
		position: fixed;
		margin-top: 20rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 30rpx;
		font-family: Arial, Helvetica, sans-serif;
	}

	.left-bt {
		left: 30rpx;
	}

	.right-bt {
		right: 30rpx;
		color: #ec5151;
	}

	.line {
		display: block;
		position: fixed;
		height: 1rpx;
		width: 100%;
		margin-top: 89rpx;
		background-color: #eee;
	}

	.address-box .right-cont input {
		width: 100%;
		font-size: 30rpx;
		color: #444;
	}

	.bargain-commont-bg {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 20;
	}

	.f-34 {
		font-size: 34rpx;
	}

	.f-32 {
		font-size: 32rpx;
	}

	.f-31 {
		font-size: 31rpx;
	}

	.f-28 {
		font-size: 28rpx;
	}

	.f-26 {
		font-size: 26rpx;
	}

	.f-24 {
		font-size: 24rpx;
	}

	.f-22 {
		font-size: 22rpx;
	}

	.b-r {
		border-right: 1rpx solid #eee;
	}

	.b-b {
		border-bottom: 1rpx solid #eee;
	}

	.b-t {
		border-top: 1rpx solid #eee;
	}

	.m-top4 {
		margin-top: 4rpx;
	}

	.m-top10 {
		margin-top: 10rpx;
	}

	.m-top20 {
		margin-top: 25rpx;
	}

	.m-top35 {
		margin-top: 35rpx;
	}
</style>
